import React, { createRef, PureComponent } from 'react'
import { message, Popconfirm } from 'antd'
import { connect, history } from '@umijs/max'
import {
 InputSearch, ProTable, ProTableOperate, ProTableOptions,
} from '@/components'
import styles from './index.less'

const { OperateItem } = ProTableOperate
// const hash = window.location.hash?.split('?id=')?.[1] || ''

@connect(({ safetyManagementEdit }) => ({ ...safetyManagementEdit }))
class SafetyManagementEdit extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      columns: [
        {
          title: '用户名称',
          dataIndex: 'username',
          width: '25%',
          key: 'username',
          ellipsis: true,
        },
        {
          title: '调用次数',
          dataIndex: 'totalCount',
          width: '25%',
          key: 'totalCount',
          ellipsis: true,
        },
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          width: '25%',
          key: 'applyTime',
          ellipsis: true,
        },
        {
          title: '操作',
          key: 'action',
          render: (record) => {
            const { apiId, userId } = record
            return (
              <ProTableOptions>
                <Popconfirm
                  title="确认要取消授权吗？"
                  onConfirm={() => { this.queryCancelApiSecurityManageById(apiId, userId) }}
                  okText="确定"
                  cancelText="取消"
                >
                  <span>取消授权</span>
                </Popconfirm>
              </ProTableOptions>
            )
          },
        },
      ],
      username: '',
      query: {
        apiId: window.location.hash?.split('?id=')?.[1] || '',
      },
      loading: false,
    }
    this.tableRef = createRef()
  }

  fetchData = () => {
    const { username, query } = this.state
    this.tableRef?.current?.resetPageNum()
    const tempQuery = {}
    tempQuery.username = username
    this.setState({
      query: {
        ...query,
        ...tempQuery,
      },
    })
  }

  queryCancelApiSecurityManageById = (apiId, userId) => {
    this.setState({
      loading: true,
    })
    this.props.dispatch({
      type: 'safetyManagementEdit/queryCancelApiSecurityManageById',
      params: {
        apiId,
        userId,
      },
      cb: (res) => {
        const { msg, status } = res
        this.setState({
          loading: false,
        })
        if (status === 200) {
          message.success('操作成功')
          this.fetchData()
        } else {
          message.error(msg || '服务端错误')
        }
      },
    })
  }

  render() {
    const {
      columns, loading, query, forceUpdate,
    } = this.state
    return (
      <div className={styles.safety_management}>
        <div className={styles.back_bar}>
          <i
            className="iconfont icon-zuo"
            onClick={() => { history.push('/data-service/safety-management') }}
            style={{ cursor: 'pointer' }}
          />
          <span onClick={() => { history.push('/data-service/safety-management') }}>编辑授权</span>
        </div>
        <div className={styles.container}>
          <ProTableOperate style={{ marginTop: 0 }}>
            <OperateItem align="left">
              <InputSearch
                placeholder="请输入用户名进行搜索"
                onChange={(e) => {
                  this.setState({
                    username: e.target.value,
                  })
                }}
                onSearch={this.fetchData}
              />
            </OperateItem>
          </ProTableOperate>
          <ProTable
            ref={this.tableRef}
            loading={loading}
            key={forceUpdate}
            url="/api/v1/dataApiSecurityManage/getEditApiSecurityManagePage"
            query={query}
            rowKey="id"
            columns={columns}
          />
        </div>

      </div>
    )
  }
}

export default SafetyManagementEdit
